<template>
  <div class="player-wrapper" :style="position">
    <img class="player-icon" :src="keeperImg" />
  </div>
</template>

<script setup lang="ts">
import keeperImg from '@/assets/keeper.png';
import { usePlayerStore } from '@/stores/player';
import { usePlayerMove } from './player';
import { usePosition } from '@/hooks/usePosition';
import { cssWidthHeight } from '@/constants';

const { player } = usePlayerStore();
const { position } = usePosition(player);
usePlayerMove();
</script>

<style lang="scss" scoped>
.player-wrapper {
  position: absolute;
  .player-icon {
    width: v-bind(cssWidthHeight);
    height: v-bind(cssWidthHeight);
  }
}
</style>
